<template>
  <div>
    <div class="provider-list">
      <div class="header">
        <div class="header-line2 flex-s">
          <el-input
            placeholder="请输入项目名称"
            v-model="params.xiangmumingcheng"
            style="width: 350px"
            size="large"
          >
            <template #append>
              <el-button
                @click="GetList"
                style="min-width: 50px"
                icon="Search"
              />
            </template>
          </el-input>
          <el-select
            width="150"
            show-border
            class="ml20"
            v-model="params.xiangmuleixing"
            size="large"
            placeholder="类型"
            clearable
            @change="GetList"
          >
            <el-option
              v-for="item in options"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            >
              {{ item.dicLabel }}
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="content providerTable">
        <el-table
          border
          :data="list"
          style="width: calc(100% - 20px); margin-top: 40px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed type="selection" width="55" />
          <el-table-column property="xmNo" label="编号" align="center" />
          <el-table-column
            property="xiangmumingcheng"
            label="项目名称"
            align="center"
          />
          <el-table-column
            property="chengshi"
            label="城市（省市区）"
            align="center"
          />
          <el-table-column
            property="xiangmuleixing"
            label="类型"
            align="center"
          />
          <el-table-column
            property="xiangmudizhi"
            label="项目地址"
            align="center"
          />
          <el-table-column
            property="zhuangtai"
            label="项目状态"
            align="center"
          />
          <el-table-column
            property="yunyingshang"
            label="项目运营商"
            align="center"
          />
          <el-table-column
            property="xiangmufuzeren"
            label="项目负责人"
            align="center"
          />
          <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-button
                v-if="check === '1'"
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'detail')"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <h-page
          v-if="total"
          v-model:curr-page="params.current"
          :size="params.size"
          :total="total"
          @change="GetList"
        />
        <el-form-item class="note-button-group flex-s mt50">
          <el-button size="large" @click="$router.go(-1)">取消</el-button>
          <el-button class="ml50" size="large" type="primary" @click="add">
            提交
          </el-button>
        </el-form-item>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDictionaryTree } from "@/api/system";
import { baseMsg } from "@/utils/utils";
import { AddBrandProject, GetSelectProject } from "@/api/brand";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      params: {
        current: Number(route.query.page) || 1,
        size: Number(route.query.size) || 10,
        ppNo: route.query.ppNo || "",
        xiangmumingcheng: "",
        xiangmuleixing: "",
      },
      list: [],
      options: [],
      total: 0,
      check: localStorage.getItem("check"),
      form: {
        ppNo: "",
        xiangmu: [],
      },
    });
    // 查询项目列表
    const GetList = async () => {
      GetSelectProject(state.params).then((res) => {
        if (res.code == 4201) {
          state.list = res.data.records;
          state.total = res.data.total;
        }
      });
    };
    // 查询项目分类
    const GetSelect = async () => {
      const res = await GetDictionaryTree({ dicModel: "xiangmuleixing" });
      if (res.code == 4201) {
        state.options = res.data;
      }
    };
    const handleSelectionChange = (val) => {
      state.form.xiangmu = val.map((item) => {
        return item.xmNo;
      });
    };
    // 添加项目提交
    const add = () => {
      state.form.ppNo = route.query.ppNo;
      if (state.form.xiangmu.length == 0) {
        baseMsg("请选择项目", false);
      } else {
        AddBrandProject(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("添加成功");
            router.go(-1);
          }
        });
      }
    };
    GetList();
    GetSelect();
    // 操作
    const onOperation = (params, operation) => {
      if (operation === "detail") {
        router.push({
          path: `/xiangmu/detail`,
          query: {
            id: params.id,
          },
        });
      }
    };
    watch(
      () => route.query,
      () => {
        state.params.current = Number(route.query.page) || 1;
        GetList();
      },
      { deep: true }
    );
    return {
      ...toRefs(state),
      GetList,
      GetSelect,
      onOperation,
      handleSelectionChange,
      add,
    };
  },
});
</script>
<style lang="scss" scoped>
.providerTable {
  padding-bottom: 30px;
}
.header {
  border-bottom: 10px solid #f2f2f2;
  border-radius: 10px 10px 0 0;
}
.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  background-color: transparent !important;
}
</style>
<style lang="scss">
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  margin-top: 40px;
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
